<script type="text/javascript">
$(function(){
	var pg = App.base.appInstIndex.ui, pp = pg.params || {}
		, hd = pg.children('.head'), bd = pg.children('.body')
		, gd = pg.seek('grid'), env = pg.seek('env')
		, logs = pg.children('.logs'), envs = Cache.base.env(App.code);

	env.mac('combo', {
		width: 80,
		boxTop: 34,
		boxWidth: 81,
		readOnly: 1,
		keyField: 'k',
		displayField: 'v',
		data: envs,
		onSelect: function(me, sk, sd){
			gd.load({ env: sk[0] });
		}
	}).val('');

	logs.find('.closer').click(function(){
		logs.hide().children('pre').empty();
	});
	
	function statusRender(r){
		var p = $('<div></div>');
		p.append('<span>' + Cache.base.app.inst.status[r.status] + '</span>');
		p.append('&nbsp;&nbsp;');
		$('<span class="a"></span>').click(function(){
			var p = pg.parent();
			r.svc = pp; //
			App.show({
				ctx: 'base',
				action: 'appInstMonitor',
				params: { addr: r.addr, key: r.app.code }
			}, function(){
				App.show({
					ctx: 'base',
					action: 'appInstIndex',
					params: pp
				}, $.noop, p);
			}, pg.parent());
		}).append('应用监控').appendTo(p);
		return p;
	}
	function optRender(r) {
		var p = $('<div></div>');
		if (r.status == 0) {
			// 未启用，未部署，实例不存在，可以编辑、删除和启用
			$('<span class="a"></span>').click(function(){
				App.open({
					title: '编辑应用实例',
					ctx: 'base',
					action: 'appInstEdit',
					params: $.extend(r, { app: pp.app })
				}, function(s){
					gd.load();
				});
			}).append('编辑').appendTo(p);
			p.append('&nbsp;');
			// 启用（可以被查询出来使用，可以用于部署和监控）
			if (App.logon.power('app.inst.enable')) {
				$('<span class="a"></span>').click(function(){
					mac.confirm('确定要' + $(this).text() + '此实例吗？', function(){
						$.post(App.ctx + '/app/inst/enable.do', {
							id: r.id
						}, function(){
							gd.load();
						});
					});
				}).append('启用').appendTo(p);
				p.append('&nbsp;');
			}
			if (App.logon.power('app.inst.delete')) {
				$('<span class="a"></span>').click(function(){
					mac.confirm('确定要' + $(this).text() + '此实例吗？', function(){
						$.post(App.ctx + '/app/inst/delete.do', {
							id: r.id
						}, function(){
							gd.load();
						});
					});
				}).append('移除').appendTo(p);
				p.append('&nbsp;');
			}
		} else if (r.status == 1) {
			//  未部署状态
			if (App.logon.power('app.deploy') && App.deploy) {
				var cb = function(b){
					$.post(App.deploy.ctx + '/app/deploy.do', {
						appId: r.appId,
						instId: r.id,
						env: r.env,
						wssid: App.websocket.sessionId,
						taskId: new Date().getTime()
					}, function(rs){
						var ro = mac.eval(rs);
						if (!ro.success) {
							mac.alert(mac.msg(ro.data, [ '部署失败' ]));
							return;
						}
						logs.toggle(b);
						gd.load();
					});
				}
				$('<span class="a"></span>').click(function(){
					mac.confirm('确定要部署此实例吗？', $.noop, {}, [{
						text : '部署并跟踪日志',
						click : function(d) {
							d.close();
							cb(true);
						}
					}, {
						text: '部署',
						click : function(d) {
							d.close();
							cb(false);
						}
					}, {
						text: '取消',
						click : function(d) {
							d.close();
						}
					}]);
				}).append('部署').appendTo(p);
				p.append('&nbsp;');
			}
			if (App.logon.power('app.inst.disable')) {
				$('<span class="a"></span>').click(function(){
					mac.confirm('确定要' + $(this).text() + '此实例吗？', function(){
						$.post(App.ctx + '/app/inst/disable.do', {
							id: r.id,
							status:0
						}, function(){
							gd.load();
						});
					});
				}).append('禁用').appendTo(p);
				p.append('&nbsp;');
			}
		} else if (r.status == 2) {
			// 已实际部署但应用处于未启动状态，可以停用、启动和卸载
			if (App.logon.power('app.inst.start')) {
				$('<span class="a"></span>').click(function(){
					mac.confirm('确定要' + $(this).text() + '此实例吗？', function(){
						$.post(App.ctx + '/app/inst/start.do', {
							id: r.id
						}, function(rs){
							var ro = mac.eval(rs);
							if (ro.success) {
								gd.load();
							} else {
								mac.alert(mac.msg(ro.data, ro.params), null, null);
							}
						});
					});
				}).append('启动').appendTo(p);
				p.append('&nbsp;');
			}
			if (App.logon.power('app.inst.undeploy') && App.deploy) {
				$('<span class="a"></span>').click(function(){
					mac.confirm('确定要' + $(this).text() + '此实例吗？', function(){
						$.post(App.deploy.ctx + '/app/undeploy.do', {
							id: r.id
						}, function(rs){
							var ro = mac.eval(rs);
							if (ro.success) {
								gd.load();
							} else {
								mac.alert(mac.msg(ro.data, ro.params), null, null);
							}
						});
					});
				}).append('卸载').appendTo(p);
				p.append('&nbsp;');
			}
		} else if (r.status == 5) {
			// 已实际部署且应用处于启动运行状态
			if (App.logon.power('app.inst.stop')) {
				$('<span class="a"></span>').click(function(){
					mac.confirm('确定要' + $(this).text() + '此实例吗？', function(){
						$.post(App.ctx + '/app/inst/stop.do', {
							id: r.id
						}, function(rs){
							var ro = mac.eval(rs);
							if (ro.success) {
								gd.load();
							} else {
								mac.alert(mac.msg(ro.data, ro.params), null, null);
							}
						});
					});
				}).append('停止').appendTo(p);
				p.append('&nbsp;');
			}
		} else {
			// 3：正在部署状态
			// 4：启动过程中
			// 6：停机过程中
			// 7：有运行，但通讯失败
			// 8：未知
		}
		return p;
	}

	gd.mac('grid', {
		key: 'id',
		cols : [{
			field: 'id', title: '<input type="checkbox" name="all" />', width: 24,
			render : function(r, tr, gd) {
				return '<input type="checkbox" name="keys" value="' + r.id + '"/>';
			}
		}, {
			field: 'no', title: '实例号', width: 80,
			render: function(r) {
				return r.no;
			}
		},{
			field: 'ip', title: '服务器IP', width: 160,
			render: function(r) {
				return $('<span class="a"></span>').click(function(){
					App.open({
						ctx: 'base',
						action: 'serverView',
						params: r.server
					});
				}).append(r.ip);
			}
		},{
			field: 'port', title: '应用端口', width: 80,
			render: function(r) {
				return $('<span class="a"></span>').click(function(){
					App.open({
						ctx: 'base',
						action: 'appView',
						params: { id: r.appId }
					});
				}).append(r.port);
			}
		},{
			field: 'user', title: '用户', width: 80
		},{
			field: 'env', title: '环境', width: 80,
			render: function(r) {
				return r.server.env;
			}
		},{
			field: 'status', title: '状态', width: 140,
			render: statusRender
// 		},{
// 			field: 'protocol', title: '协议', width: 120,
// 			render: function(r){
// 				return $('<div class="combo"></div>').mac('combo', {
// 					keyField: 'code',
// 					displayField: 'name',
// 					multiSelect: false,
// 					width: 120,
// 					boxWidth: 400,
// 					cols : [{
// 						field: 'code', width: 120
// 					},{
// 						field: 'name', width: 200
// 					},{
// 						field: 'id', width: 80,
// 						render: function(r){
// 							return $('<span></span>').click(function(){
// 								App.open({
// 									ctx: 'soagov',
// 									action: 'macRpcIndex',
// 									params: r
// 								}, $.noop);
// 							}).addClass('a').text('查看详情');
// 						}
// 					}],
// 					data: pp.app.protocols
// 				});
// 			}
		},{
			field: 'logs', title: '日志', width: 60,
			render: function(r){
				// 查看这台机器的日志，而不是部署日志
				return $('<span class="a"></span>').click(function(){
					var url = '/log#query?target=' + 'logs' + '&addr=' + r.addr;
					window.open(encodeURI(url));
				}).append('查看');
			}
		},{
			field: 'opt', title: '操作', width: 140,
			render: optRender
		}],
		loader: {
			url: App.ctx + '/app/inst/list.do',
			params: {
				pageNo: 1, pageSize: 50, appId: pp.app.id
			},
			autoLoad: true
		},
		pagerLength: 50
	});
	
	pg.seek('all').click(function(){
		gd.seek('keys').prop('checked', $(this).prop('checked'));
	});

	if (App.logon.power('app.deploy')) {
		hd.seek('add1').click(function(){
			App.open({
				title: '添加应用实例',
				ctx: 'base',
				action: 'appInstEdit',
				params: { app: pp.app, env: env.val() }
			}, function(s){
				gd.load();
			});
		}).show();
		hd.seek('addN').click(function(){
			App.open({
				title: '批量添加部署节点',
				ctx: 'base',
				action: 'serverPicker',
				model: true,
				params: {
					env: env.val(),
					multi: 1,
					projId: pp.app.projId,
					id: pp.app.id
				}
			}, function(s){
				if (!s || !s.length){
					return;
				}
				$.post(App.ctx + '/app/inst/bind.do' ,{
					appIds: pp.app.id,
					serverIds:
						$.map(s, function(n){
							return n.id;
						}).join(',')
				}, function(rs){
					gd.load();
				});
			});
		}).show();
	}
	//
	if (App.logon.power('app.inst.undeploy')) {
		hd.seek('remove').click(function(){
			var keys=gd.seek('keys').filter(':checked');
			if(keys.length>0){
				$.post(App.ctx + '/app/inst/delete.do' ,{
	 				id: keys.map(function(){return $(this).val()}).get().join(',')
	 			}, function(rs){
	 				gd.load();
	 			});
				
			}
		}).show();
	}

	pg.seek('key').keydown(function(e) {
		if (e.keyCode == 13){
			gd.load({ key : $(this).val() });
		}
	});
	pg.seek('find').click(function(e){
		gd.load({ key : pg.seek('key').val() });
	});
	
	function adjust(){
		var h = pg.parent().height();
		bd.height(h - hd.height() - 24);
		gd.adjust();
		//
		var de = document.documentElement
			, ch = de.clientHeight, cw = de.clientWidth;
		h = logs.children('.head').height();
		logs.width(cw).height(ch - 2);
		logs.children('pre').height(ch - h - 4);
	}
	$(window).resize(adjust);
	adjust();

	function updateGrid(o, e, ws){
		// gd.load(); // 不能简单的load
		var d = o.data, k = d.instId, tr = gd.seek(k), r = gd.data[k];
		if (tr.length && r) {
			r.status = d.status;
			tr.seek('status').html(statusRender(r));
			tr.seek('opt').html(optRender(r));
		}
	}

	App.websocket.on('deploy', 'log', 'appInstIndex', function(o, e, ws) {
		var p = logs.children('pre');
		p.append(o.data);
		p.scrollTop(p[0].scrollHeight);
	});
	App.websocket.on('deploy', 'event', 'appInstIndex', updateGrid);
	App.websocket.on('app', 'inst', 'appInstIndex', updateGrid);
});
</script>
<div class="head">
	<div class="fl">
		<button class="hidden" name="add1">添加部署节点</button>
		<button class="hidden" name="addN">批量添加部署节点</button>
		<button class="hidden" name="remove">批量移除</button>
	</div>
	<div class="fl">
		<span class="fl">环境：</span>
		<div class="combo fl" name="env" style="margin-top: 3px;"></div>
	</div>
	<div class="fl">
		<span>&nbsp;&nbsp;&nbsp;&nbsp;关键字：</span>
		<input type="text" name="key" />
		<button name="find">查找</button>
	</div>
	<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="body">
	<div class="grid" name="grid"></div>
</div>
<div class="logs">
	<div class="head">
		<span class="fl"></span>
		<span class="fr">
			<span class="icon icon-close closer"></span>
		</span>
	</div>
	<pre></pre>
</div>